<!--
 @description 催办工单
 @fileName UrgeOrder.vue
 @author zengqiongying
 @created 2022/05/24 15:18:57
-->
<template>
  <div>
    <Button :type="carbonInfo.workOrderState === 3 ? 'info' : 'primary'" :disabled="disabled" @click="clickHandle">催办</Button>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      destroy-on-close
      width="80%"
      :close-on-click-modal="false"
      title="催办"
      @open="openDialog"
      @close="closeDialog"
    >
      <div class="contentBody">
        <search-form ref="refSearch" :search-config="searchConfig" :copyable="false" label-width="110" @clear="handleClearSearch" @search="handleSearch" @edit-change="handleSearchEditChange" />
        <table-box
          ref="refTable"
          table-size="small"
          :table-config="tableConfig"
          :other-filters="otherFilters"
          :table-height="400"
          :no-request="false"
          :show-index="false"
          :show-selection="true"
          :show-custom-setting="false"
          :selected-arry.sync="tableSelected"
          :table-sortable="false"
          @selection-change="handleselectionChange"
          @row-click="handleRowClick"
        />
      </div>
      <div style="text-align: right;margin-top:10px">
        <Button @click="closeDialog">取消</Button>
        <Button type="primary" :loading="urgeLoading" @click="submitHandle">确定催办</Button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Button from '@/components/Button'
import { parseTime } from '@/utils/'
import { putUrgeWorkOrder } from '@/api/workOrder'

export default {
  name: 'UrgeOrder',
  components: {
    Button
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    carbonInfo: {
      type: Object,
      default: () => ({})
    },
    enableOpen: {
      type: Function,
      default: () => Promise.reject(),
      require: true
    }
  },
  data() {
    return {
      urgeLoading: false,
      visible: false,
      searchConfig: [
        {
          label: '组织性质', prop: 'operationMode', type: 'select', value: '',
          config: {
            selectData: [
              { label: '办事处', value: '01' },
              { label: '经销商', value: '02' },
              { label: '责任部门', value: '03' }
            ]
          }
        },
        /* {
          label: '责任部门', prop: 'dept', type: 'select', value: '',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/RESPONSIBLE_DEPARTMENT`,
            defaultProps: { label: 'dictName', value: 'dictCode' },
            paramsRaw: {
              appCode: 'call-center',
              domainCode: 'marketing'
            }
          }
        },
        {
          label: 'QUP组织', prop: 'qupOrganization', type: 'select', value: '',
          config: {
            selectData: []
          }
        },
        {
          label: '用户', prop: 'receiver', type: 'select', value: '',
          config: {
            selectData: []
          }
        }, */
        { label: '联系电话', prop: 'receiverPhone', type: 'text', value: '' },
        {
          label: '接收状态', prop: 'state', type: 'select', value: '',
          config: {
            selectData: [
              { label: '已接收', value: '02' },
              { label: '未接收', value: '01' }
            ]
          }
        }
      ],
      defaultFilters: [],
      otherFilters: [], // 表格额外查询条件
      otherRaws: {},
      tableSelected: [], // 选择列
      tableConfig: {
        interfacePath: `/call-center/api/v2/workOrderOperationReceiver/page`,
        tabIndex: 20,
        hideFuncBar: true,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'operationMode',
            label: '组织性质',
            minWidth: 120,
            formatData: ({ operationMode }) => {
              const obj = {
                '01': '办事处',
                '02': '经销商',
                '03': '责任部门'
              }
              return obj[operationMode] || ''
            }
          },
          {
            prop: 'deptName',
            label: '接收方名称',
            minWidth: 150
          },
          {
            prop: 'receiverPhone',
            label: '联系电话',
            minWidth: 150
          },
          {
            prop: 'receiver',
            label: '人员',
            minWidth: 150,
            formatData: ({ receiver, receiverName }) => {
              if (receiver) {
                return ` ${receiverName}(${receiver})`
              } else {
                return receiverName
              }
            }
          },
          {
            prop: 'operationTime',
            label: `派送时间`,
            minWidth: 150,
            formatData: ({ operationTime }) => {
              return parseTime(operationTime)
            }
          },
          {
            prop: 'state',
            label: '接收状态',
            width: 100,
            formatData: ({ state }) => {
              return state === '02' ? '已接收' : '未接收'
            }
          }
        ]
      }
    }
  },

  computed: {},

  created() {

  },
  activated() {},

  mounted() {},

  methods: {
    clickHandle() {
      this.defaultFilters = [
        { id: 'operationType', property: 'operationType', operator: '=', value: '01' },
        { id: 'workOrderId', property: 'workOrderId', operator: '=', value: this.carbonInfo.id }
      ]
      this.otherFilters = [...this.defaultFilters]
      this.enableOpen().then(() => {
        this.visible = true
      })
    },
    openDialog() {

    },
    closeDialog() {
      this.tableSelected = []
      this.visible = false
    },
    handleRowClick({ row }) {
      this.$refs.refTable.clearSelection()
      this.$nextTick(() => {
        this.$refs.refTable.toggleRowSelection(row, true)
      })
    },
    handleselectionChange(val) {
      this.tableSelected = val
    },
    // 搜索项联动
    handleSearchEditChange({ prop, value }) {
      if (prop === 'dept') {
        // 切换责任部门
        this.setQupOrgConfig(value)
      } else if (prop === 'qupOrganization') {
        // 切换组织
        this.setUerConfig(value)
      }
    },
    // 设置QUP组织查询配置
    setQupOrgConfig(value) {
      let config = {
        remote: false,
        remoteUrl: '',
        selectData: []
      }
      if (value) {
        config = {
          remote: true,
          requestMethod: 'post',
          remoteUrl: `/call-center/api/v1/staffInfo/remoteOrg/${value}/page`,
          defaultProps: { label: 'orgName', value: 'orgCode' }
        }
      }
      this.$refs.refSearch.initSelectData('qupOrganization', config)
      this.$refs.refSearch.updateValue('qupOrganization', '')
    },
    // 设置用户查询配置
    setUerConfig(value) {
      let config = {
        remote: false,
        remoteUrl: '',
        selectData: []
      }
      if (value) {
        config = {
          remote: true,
          requestMethod: 'post',
          remoteUrl: `/call-center/api/v1/staffInfo/user/org/${value}`,
          defaultProps: { label: 'userName', value: 'account' }
        }
      }
      this.$refs.refSearch.initSelectData('receiver', config)
      this.$refs.refSearch.updateValue('receiver', '')
    },
    // 清空查询条件
    handleClearSearch() {
      this.setQupOrgConfig()
    },
    // 搜索
    handleSearch(params) {
      const filtersRaw = params.filtersRaw || []
      this.otherFilters = [...this.defaultFilters, ...filtersRaw]

      this.otherRaws = params.paramsRaw || {}
      this.refreshTable(true)
    },
    // 刷新主表
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable && this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
        this.tableSelected = []
      })
    },
    submitHandle() {
      if (this.urgeLoading) return
      if (this.tableSelected.length === 0) {
        this.$message.warning('请至少选择一条数据进行！')
        return
      }
      this.$msgbox({
        title: '催办',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        message: `确认要向当前所选接收人发送此工单的催办信息吗？`
      }).then(async() => {
        this.urgeLoading = true
        const urgeIdList = this.tableSelected.map(v => v.id)
        const params = {
          id: this.carbonInfo.id, urgeIdList
        }
        putUrgeWorkOrder(params).then(res => {
          if (res.success === 1) {
            this.$message({
              message: '工单催办成功',
              type: 'success'
            })
            this.$emit('success', this.carbonInfo.id)
            this.closeDialog()
          }
        }).finally(() => { this.urgeLoading = false })
      })
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
